import MAP_DATA from "../../../../static/js/yantai.js"
import taskService from '@/services/TaskService'
import statisticService from '@/services/StatisticService'

export default {
  name: 'Produce',
  data: function () {
    return {
      todaySDdata: [],
      starttime: '',
      endtime: '',
      kcStarttime: '',
      kcEndtime: '',
      jcgRadio: '船舶种类',
      jcgnum: "0",
      chRadio: '总载客',
      chnum: "0",
      xqRadio: '体系内外',
      xqnum: '0',
      cjgRadio: '船舶种类',
      cjgnum: '2081',
      jgRadio: '',
      jgnum: "0",
      bwRadio: '靠泊能力',
      bwnum: "0",
      mapChart: {},
      linechart1: {},
      linechart2: {},
      linechart3: {},
      linechart4: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      myChart6: {},
      hwycDate: 0,
      jcgDate: 0,
      lklDate: 0,
      wxpDate: 0,
      hspos: [],
      fenshu: 0,
      orgid: localStorage.getItem('pid'),
      publishDialog: false,
      proDialog: false,
    };
  },
  created() {
    // this.$root.eventHub.$emit('fs');
    if (this.orgid == 4) {
      this.fenshu = 8
    } else {
      this.fenshu = 6
    }
  },
  mounted() {
    //辖区公司数量
    this.myChart3 = this.$echarts.init(document.getElementsByClassName('echarts')[2])
    //船籍港船舶数量
    this.myChart4 = this.$echarts.init(document.getElementsByClassName('echarts')[0])
    //船员数量
    if (this.orgid != 4) {
      this.myChart5 = this.$echarts.init(document.getElementsByClassName('echarts')[3])
    }

    //泊位数量
    this.myChart6 = this.$echarts.init(document.getElementsByClassName('echarts')[1])
    //进出港船舶
    this.linechart1 = this.$echarts.init(document.getElementsByClassName('plineEcharts')[0])
    //旅客到达发送量趋势
    this.linechart2 = this.$echarts.init(document.getElementsByClassName('plineEcharts')[1])
    //货物运输趋势
    this.linechart3 = this.$echarts.init(document.getElementsByClassName('plineEcharts')[2])
    //危险品船舶统计
    this.linechart4 = this.$echarts.init(document.getElementsByClassName('plineEcharts')[3])
    var option = {
      color: ['#ff5831', '#57bbff', '#4bebff', '#ff8a61', '#60ffb5', '#37ff6f', '#fff046', '#fa21d4', '#c94bfe', '#7e4bfe', '#b1ff4b'],
      tooltip: {
        trigger: 'item',
      },
      grid: {
        top: '33'
      },
      legend: {
        textStyle: {
          color: 'white'
        },
        data: []
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '85%',
          center: ['50%', '50%'],
          label: {
            show: false
          },
          data: [],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    this.myChart3.setOption(option)
    this.myChart4.setOption(option)
    if (this.orgid != 4) {
      this.myChart5.setOption(option)
    }
    this.myChart6.setOption(option)
    this.getMapData()
    this.getPieData()
    this.getRptVoyShip()
    this.getRptVoyPass()
    this.getGood()
    this.getDangerGoods()
    // this.getLKL()
    // this.getYS()
    // this.getWXP()
  },

  methods: {
    getMap() {
      this.mapChart = this.$echarts.init(document.getElementsByClassName('mapEcharts')[0]);
    },
    getPieData() {
      statisticService.productPie().then(res => {
        this.tjcy = res.data['船员相关机构'].datas['船员相关机构']
        this.jgnum = res.data['船员相关机构'].total
        this.getData5()


        this.xqgs = res.data['辖区公司'].datas
        this.xqnum = res.data['辖区公司'].total
        this.getData3()


        this.cjgcb = res.data['船籍港船舶'].datas
        this.cjgnum = res.data['船籍港船舶'].total
        this.getData4()

        this.tjbw = res.data['泊位'].datas
        this.bwnum = res.data['泊位'].total
        this.getData6()

      })
    },
    getRptVoyShip() { // 进出港船舶
      statisticService.RptVoyShip('type=' + this.jcgDate).then(res => {
        var data = []
        var date = []
        for (var i of res.data) {
          data.unshift(i.count)
          if (this.jcgDate == 0) date.unshift(i.name.substring(5))
          else date.unshift(i.name)
        }
        var option = {
          title: {
            subtext: '单位(万)'
          },
          grid: {
            top: 35,
            left: 10,
            right: 35,
            bottom: 0,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            axisTick: {
              alignWithLabel: true
            },
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval: 0,

              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            data: date
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            boundaryGap: [0, '100%']
          },
          series: [
            {
              name: '进出港船舶',
              type: 'line',
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: '8',
              // sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#f9cd3f'
                }
              },
              label: {
                show: true,
              },
              // showAllSymbol:true,
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#f9cd3f'
                  }, {
                    offset: 1,
                    color: 'transparent'
                  }])
                }
              },
              data: data
            }
          ]
        }
        this.linechart1.setOption(option)
      })
    },
    getRptVoyPass() { // 旅客到达发送量趋势
      statisticService.RptVoyPass('type=' + this.lklDate).then(res => {
        var data = []
        var date = []
        for (var i of res.data) {
          data.unshift(i.count)
          if (this.lklDate == 0) date.unshift(i.name.substring(5))
          else date.unshift(i.name)
        }
        var option = {
          title: {
            subtext: '单位(万)'
          },
          grid: {
            top: 35,
            left: 10,
            right: 35,
            bottom: 0,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval: 0,

              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            data: date
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            boundaryGap: [0, '100%']
          },
          series: [
            {
              name: '进出港船舶',
              type: 'line',
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: '6',
              // sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#fe24dc'
                }
              },
              label: {
                show: true,
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#fe24dc'
                  }, {
                    offset: 1,
                    color: 'transparent'
                  }])
                }
              },
              data: data
            }
          ]
        }
        this.linechart2.setOption(option)
      })
    },
    getGood() { // 货物运输趋势
      statisticService.Good('type=' + this.hwycDate).then(res => {
        var date = []
        var wmcount = []
        var nmcount = []
        var count = []
        for (var i of res.data) {
          if (this.hwycDate == 0) date.unshift(i.name.substring(5))
          else date.unshift(i.name)
          count.unshift(i.count)
          nmcount.unshift(i.nmcount)
          wmcount.unshift(i.wmcount)
        }
        var option = {
          color: ["#fdce08", "#2afe51", "#fe508f"],
          title: {
            subtext: '单位(万)',
            top: '5'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            textStyle: {
              color: 'white'
            },
            left: 'left',
            data: ['内贸', '外贸', '货运总量']
          },
          grid: {
            top: 40,
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            type: 'category',
            data: date
          },
          yAxis: {
            axisLabel: {
              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            type: 'value'
          },
          series: [
            {
              name: '内贸',
              type: 'line',
              data: nmcount
            },
            {
              name: '外贸',
              type: 'line',
              data: wmcount
            },
            {
              name: '货运总量',
              type: 'line',
              data: count
            }
          ]
        };
        this.linechart3.setOption(option)
      })
    },
    getDangerGoods() {
      statisticService.DangerGoods('type=' + this.wxpDate).then(res => {
        this.linechart4.clear()
        let date = res.data.date
        let series = []
        date = date.map(item => {
          if (this.wxpDate == 0) return item.substring(5)
          else return item
        }).sort((a, b) => {
          return -1
        })

        for (let j in res.data) {
          if (j != 'date') {
            series.push({
              name: j,
              type: 'bar',
              stack: '海事处',
              data: res.data[j].sort((a, b) => {
                return -1
              })
            })
          }
        }

        var option = {
          color: ["#e50011", "#f39801", "#fff100", "#8fc321", "#019e97", "#00a1e9", "#611987"],
          title: {
            subtext: '单位(百)',
            top: '0'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            position: function (pos, params, dom, rect, size) {
              // 固定在顶部
              var obj = {top: 0};
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 20;
              return obj;
            }
          },
          // legend: {
          //     data:name
          // },
          grid: {
            top: 35,
            left: 45,
            right: 10,
            bottom: 20,
            // containLabel: true
          },
          xAxis: [
            {
              axisTick: {
                alignWithLabel: true
              },

              axisLabel: {
                interval: 0,
                color: "#5597cb"
              },
              axisLine: {
                lineStyle: {color: 'white',}

              },
              type: 'category',
              data: date
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                color: "#5597cb"
              },
              axisLine: {
                lineStyle: {color: 'white',}

              },
            }
          ],
          series: series
        };
        this.linechart4.setOption(option, false)
      })
    },
    goBack() {
      this.$router.push('/map')
    },
    getMapData() {
      let obj = {
        "managementUnit": 4,
        "enforcementBrigade": 21,
        "taskUsers": [
          {
            "userId": 12
          },
          {
            "userId": 13
          },
          {
            "userId": 14
          }
        ]
      }
      this.mapChart = this.$echarts.init(document.getElementsByClassName('mapEcharts')[0]);
      this.$echarts.registerMap('烟台', MAP_DATA);
      statisticService.getLocal().then(res => {
        if (res.status == 200) {
          this.hspos = []
          for (var i of res.data) {
            if (i.orgCode == '160000') {
              i.latitude = 37.557756
              i.longitude = 121.358611
            } else if (i.orgCode == '160100') {
              i.latitude = 37.442019
              i.longitude = 121.460928
            } else if (i.orgCode == '160500') {
              i.longitude = 121.66
              i.latitude = 37.35
            } else {
              // i.mabard_name=i.mabard_name.slice(2)
              i.marineName = i.marineName
            }
            this.hspos.push({
              name: i.marineName,
              value: [i.longitude, i.latitude, i.orgCode]
            })
          }
        }
      }).then(res => {
        var option = {

          title: {
            text: '今日统计',
            left: 'left',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',

          },

          geo: {
            type: 'map',
            map: '烟台',
            label: {
              emphasis: {
                show: false
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: '#182d71',
                borderColor: '#0febff'
              },
              emphasis: {
                areaColor: '#182d71'
              }
            }
          },
          series: [
            {
              name: 'today',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.hspos,
              symbolSize: function (val) {
                if (val[2] == '160000') {
                  return 20;
                } else {
                  return 10;
                }

              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#ddb926'
                }
              }
            },
            {
              name: '今日统计',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: this.hspos,
              symbolSize: function (val) {
                if (val[2] == '160000') {
                  return 20;
                } else {
                  return 10;
                }

              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              tooltip: {
                formatter: (params) => {
                  let seaInfo = '', areaNum = 0, seaLength = 0
                  if (params.value[2] == 160600) { // 海阳海事处
                    areaNum = 430
                    seaLength = 229.4
                  } else if (params.value[2] == 160500) { // 牟平海事处
                    areaNum = 562.5
                    seaLength = 187.2
                  } else if (params.value[2] == 160100) { // "芝罘海事处"
                    areaNum = 8200
                    seaLength = 110
                  } else if (params.value[2] == 160200) { // 蓬莱海事处
                    areaNum = 680
                    seaLength = 60
                  } else if (params.value[2] == 160300) { // 龙口海事处
                    areaNum = 4700
                    seaLength = 68.4
                  } else if (params.value[2] == 160700) { // 长岛海事处
                    areaNum = 3541
                    seaLength = 147
                  } else if (params.value[2] == 160000) { // 烟台海事局
                    areaNum = '2.25万'
                    seaLength = 910
                  } else if (params.value[2] == 160800) { // 八角海事处
                    areaNum = 3500
                    seaLength = 65
                  }

                  seaInfo = '水域面积：' + areaNum + 'km²' + '</br>' + '岸线长度：' + seaLength + 'km'
                  // if (this.todaySDdata.length != 0) {
                  //   for (var j of this.todaySDdata) {
                  //     if (j['机构名称'].lastIndexOf(params.name) != -1) {
                  //       //     for(var l in j){
                  //       //         if(j[l]&&l!='机构名称'){
                  //       //       res+=l +' : '+j[l]+'</br>';
                  //       //          }
                  //       // }
                  //       res = res + '辖区船舶艘次:' + j['辖区船舶艘次'] + '</br>' + '监管船舶艘次:' + j['监管船舶艘次'] + '</br>' + '进出港船舶艘次:' + j['进出港船舶艘次'] + '</br>' + '旅客运送量:' + j['旅客运送量'] + '</br>' + '货物吞吐量:' + j['货物吞吐量'] + '</br>' + '辖区水域面积:' + j['辖区水域面积'] + '</br>' + '海岸线长度:' + j['海岸线长度'] + '</br>'
                  //     }
                  //   }
                  // }

                  let res = params.name + '<br/>' + seaInfo
                  return res
                }
              },
              zlevel: 1
            }
          ]
        };
        this.mapChart.on('click', (res) => {
          if (res.name == '长岛海事处') {
            this.publishDialog = true;
            this.proDialog = false;
          }
          if (res.name == '烟台海事局') {
            this.proDialog = true;
            this.publishDialog = false;
          }
        })
        this.mapChart.setOption(option);
      })
    },
    getWXP() {
      this.$axios.get(this.$config['tjwxp'], {
        params: {
          skey: localStorage.getItem('auth'),
          date: this.wxpDate
        }
      }).then((res) => {
        this.linechart4.clear()
        var date = []
        var count = []
        var series = []
        for (var i of res.data.content) {
          date.unshift(i.date)
          count.unshift(i.count.split(','))
        }

        var name = res.data.content[0].name.split(',')
        var num = 0
        for (var j of name) {
          var data = []
          for (var k of count) {
            data.push(k[num])
          }
          series.push({
            name: j,
            type: 'bar',
            stack: '海事处',
            data: data
          })
          num++
        }

        var option = {
          color: ["#e50011", "#f39801", "#fff100", "#8fc321", "#019e97", "#00a1e9", "#611987"],
          title: {
            subtext: '单位(百)',
            top: '0'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            position: function (pos, params, dom, rect, size) {
              // 固定在顶部
              var obj = {top: 0};
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 20;
              return obj;
            }
          },
          // legend: {
          //     data:name
          // },
          grid: {
            top: 35,
            left: 45,
            right: 10,
            bottom: 20,
            // containLabel: true
          },
          xAxis: [
            {
              axisTick: {
                alignWithLabel: true
              },

              axisLabel: {
                interval: 0,
                color: "#5597cb"
              },
              axisLine: {
                lineStyle: {color: 'white',}

              },
              type: 'category',
              data: date
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                color: "#5597cb"
              },
              axisLine: {
                lineStyle: {color: 'white',}

              },
            }
          ],
          series: series
        };
        this.linechart4.setOption(option, false)
      })
    },
    getYS() {
      this.$axios.get(this.$config['tjhw'], {
        params: {
          skey: localStorage.getItem('auth'),
          date: this.hwycDate
        }
      }).then((res) => {
        var date = []
        var wmcount = []
        var nmcount = []
        var count = []
        for (var i of res.data.content.count) {
          date.unshift(i.date)
          count.unshift(i.count)
          nmcount.unshift(i.NMcount)
          wmcount.unshift(i.WMcount)
        }
        var option = {
          color: ["#fdce08", "#2afe51", "#fe508f"],
          title: {
            subtext: '单位(万)',
            top: '5'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            textStyle: {
              color: 'white'
            },
            left: 'left',
            data: ['内贸', '外贸', '货运总量']
          },
          grid: {
            top: 40,
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            type: 'category',
            data: date
          },
          yAxis: {
            axisLabel: {
              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            type: 'value'
          },
          series: [
            {
              name: '内贸',
              type: 'line',
              data: nmcount
            },
            {
              name: '外贸',
              type: 'line',
              data: wmcount
            },
            {
              name: '货运总量',
              type: 'line',
              data: count
            }
          ]
        };
        this.linechart3.setOption(option)
      })
    },
    getJCG() {
      statisticService.productLine().then(res => {
      })

    },
    getLKL() {
      this.$axios.get(this.$config['tjlkl'], {
        params: {
          skey: localStorage.getItem('auth'),
          date: this.lklDate
        }
      }).then((res) => {
        var data = []
        var date = []
        for (var i of res.data.content) {
          data.unshift(i.count)
          date.unshift(i.date)
        }
        var option = {
          title: {
            subtext: '单位(万)'
          },
          grid: {
            top: 35,
            left: 10,
            right: 35,
            bottom: 0,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval: 0,

              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            data: date
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: "#5597cb"
            },
            axisLine: {
              lineStyle: {color: 'white',}

            },
            boundaryGap: [0, '100%']
          },
          series: [
            {
              name: '进出港船舶',
              type: 'line',
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: '6',
              // sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#fe24dc'
                }
              },
              label: {
                show: true,
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#fe24dc'
                  }, {
                    offset: 1,
                    color: 'transparent'
                  }])
                }
              },
              data: data
            }
          ]
        }
        this.linechart2.setOption(option)
      })
    },
// getData(){

//     this.$axios.get(this.$config['tjjcgcb'],{params:{skey:localStorage.getItem('auth'),startTm:this.starttime,stopTm:this.endtime}}).then((res)=>{
//         this.tjjcgcb=res.data.content
//         this.jcgnum=res.data.content['船舶种类'].total
//         // this.bwnum=res.data.content['管辖海事处'][0].total
//         this.getData1()
//        this.getData2()
//     })
// },
// getData1(){
//     var arr=[]
//     var arr1=[]
//     var obj1=this.tjjcgcb[this.jcgRadio]
//     for(var i in obj1){
//       if(i=='total'){

//       }else{
//         arr.push({value:obj1[i],name:i})
//             arr1.push(i)
//       }


//     }
//     var option={ legend: {
//         data: arr1
//     },
//     series : [
//         {   name:this.xqRadio,
//             data:arr
//         }]}
//     this.myChart1.setOption(option)
// },
// getData2(){
//     this.chnum=this.tjjcgcb[this.chRadio]
//    var option={
//        legend:{data:[this.chRadio]},
//        series:[ {name:this.chRadio,
//         data:[this.tjjcgcb[this.chRadio]]
//     }]
//    }
//    this.myChart2.setOption(option)
// },
    getData3() {
      var arr = []
      var arr1 = []
      for (let key in this.xqgs[this.xqRadio]) {
        arr.push({value: this.xqgs[this.xqRadio][key], name: key})
        // arr1.push(i.gxjg)
      }
      var option = {
        series: [
          {
            name: this.xqRadio,
            data: arr
          }]
      }
      this.myChart3.setOption(option)
    },
    getData4() {
      var arr = []
      for (let key in this.cjgcb[this.cjgRadio]) {
        arr.push({value: this.cjgcb[this.cjgRadio][key], name: key})
      }
      var option = {
        series: [
          {
            name: this.cjgRadio,
            data: arr
          }]
      }
      this.myChart4.setOption(option)
    },
    getData5() {
      var arr = []
      var arr1 = []
      for (let key in this.tjcy) {
        arr.push({value: this.tjcy[key], name: key})
        // arr1.push(i.type)
      }
      var option = {
        series: [
          {
            name: '船员相关机构数量',
            data: arr
          }]
      }
      this.myChart5.setOption(option)
    },
    getData6() {
      var arr = []
      for (let key in this.tjbw[this.bwRadio]) {
        arr.push({value: this.tjbw[this.bwRadio][key], name: key})
      }

      var option = {
        series: [
          {
            name: '泊位数量',

            data: arr
          }]
      }
      this.myChart6.setOption(option)
    },
    //路由跳转
    proRouter() {
      this.$router.push('/produce')
    },
    enRouter() {
      this.$router.push('/supervise')
    },
    supRouter() {
      this.$router.push('/ensure')
    }
  }
}
